<div class="page-container">
    <h1>特征点检测</h1>
    
    <!-- API说明 -->
    <div class="api-docs">
        <h3>API接口说明</h3>
        <div class="api-item">
            <h4>1. 获取特征点坐标</h4>
            <p>接口地址：/faceapi/v1/landmarksPoint</p>
            <p>返回格式：JSON</p>
            <p>请求方式：POST</p>
            <p>请求示例：</p>
            <pre>
curl -X POST /faceapi/v1/landmarksPoint 
-H "Authorization: your_token_here" 
-F "imgFile=@image.jpg"</pre>

            <p>请求参数说明：</p>
            <table class="api-table">
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>必填</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td>imgFile</td>
                    <td>file</td>
                    <td>是</td>
                    <td>图片文件，支持jpg/png格式</td>
                </tr>
                <tr>
                    <td>Authorization</td>
                    <td>string</td>
                    <td>是</td>
                    <td>登录获取的token，需要在请求头中传递</td>
                </tr>
            </table>

            <p>返回参数说明：</p>
            <table class="api-table">
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td>success</td>
                    <td>boolean</td>
                    <td>请求是否成功</td>
                </tr>
                <tr>
                    <td>code</td>
                    <td>integer</td>
                    <td>状态码，200表示成功</td>
                </tr>
                <tr>
                    <td>msg</td>
                    <td>string</td>
                    <td>状态描述</td>
                </tr>
                <tr>
                    <td>data.face_landmarks_list</td>
                    <td>array</td>
                    <td>人脸特征点列表，包含眼睛、眉毛、鼻子等关键点坐标</td>
                </tr>
            </table>

            <p>JSON返回示例：</p>
            <pre>
{
    "success": true,
    "code": 200,
    "msg": "检测完成",
    "data": {
        "face_landmarks_list": [{
            "chin": [[x1,y1], [x2,y2], ...],
            "left_eye": [[x1,y1], [x2,y2], ...],
            "right_eye": [[x1,y1], [x2,y2], ...],
            "nose_bridge": [[x1,y1], [x2,y2], ...],
            "nose_tip": [[x1,y1], [x2,y2], ...],
            "left_eyebrow": [[x1,y1], [x2,y2], ...],
            "right_eyebrow": [[x1,y1], [x2,y2], ...],
            "top_lip": [[x1,y1], [x2,y2], ...],
            "bottom_lip": [[x1,y1], [x2,y2], ...]
        }]
    }
}</pre>
        </div>
        <div class="api-item">
            <h4>2. 绘制特征点</h4>
            <p>接口地址：/faceapi/v1/landmarksDraw</p>
            <p>返回格式：JSON</p>
            <p>请求方式：POST</p>
            <p>请求示例：</p>
            <pre>
curl -X POST /faceapi/v1/landmarksDraw 
-H "Authorization: your_token_here" 
-F "imgFile=@image.jpg"</pre>
            
            <p>请求参数说明：</p>
            <table class="api-table">
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>必填</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td>imgFile</td>
                    <td>file</td>
                    <td>是</td>
                    <td>图片文件，支持jpg/png格式</td>
                </tr>
                <tr>
                    <td>Authorization</td>
                    <td>string</td>
                    <td>是</td>
                    <td>登录获取的token，需要在请求头中传递</td>
                </tr>
            </table>

            <p>返回参数说明：</p>
            <table class="api-table">
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td>success</td>
                    <td>boolean</td>
                    <td>请求是否成功</td>
                </tr>
                <tr>
                    <td>code</td>
                    <td>integer</td>
                    <td>状态码，200表示成功</td>
                </tr>
                <tr>
                    <td>msg</td>
                    <td>string</td>
                    <td>状态描述</td>
                </tr>
                <tr>
                    <td>data.image</td>
                    <td>string</td>
                    <td>base64编码的处理后图片</td>
                </tr>
            </table>

            <p>JSON返回示例：</p>
            <pre>
{
    "success": true,
    "code": 200,
    "msg": "绘制完成",
    "data": {
        "image": "base64_encoded_image"
    }
}</pre>
        </div>
        <div class="api-item">
            <h4>3. 虚拟美妆</h4>
            <p>接口地址：/faceapi/v1/landmarksMakeup</p>
            <p>返回格式：JSON</p>
            <p>请求方式：POST</p>
            <p>请求示例：</p>
            <pre>
curl -X POST /faceapi/v1/landmarksMakeup 
-H "Authorization: your_token_here" 
-F "imgFile=@image.jpg"</pre>
            
            <p>请求参数说明：</p>
            <table class="api-table">
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>必填</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td>imgFile</td>
                    <td>file</td>
                    <td>是</td>
                    <td>图片文件，支持jpg/png格式</td>
                </tr>
                <tr>
                    <td>Authorization</td>
                    <td>string</td>
                    <td>是</td>
                    <td>登录获取的token，需要在请求头中传递</td>
                </tr>
            </table>

            <p>返回参数说明：</p>
            <table class="api-table">
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td>success</td>
                    <td>boolean</td>
                    <td>请求是否成功</td>
                </tr>
                <tr>
                    <td>code</td>
                    <td>integer</td>
                    <td>状态码，200表示成功</td>
                </tr>
                <tr>
                    <td>msg</td>
                    <td>string</td>
                    <td>状态描述</td>
                </tr>
                <tr>
                    <td>data.image</td>
                    <td>string</td>
                    <td>base64编码的美妆后图片</td>
                </tr>
            </table>

            <p>JSON返回示例：</p>
            <pre>
{
    "success": true,
    "code": 200,
    "msg": "美妆完成",
    "data": {
        "image": "base64_encoded_image"
    }
}</pre>
        </div>
    </div>

    <div class="function-group">
        <div class="upload-area" id="landmarkUpload">
            <input type="file" id="landmarkFile" accept="image/*" style="display: none;">
            <div>点击或拖拽图片到此处</div>
            <img id="landmarkPreview" class="preview-image" style="display: none;">
        </div>
        <div class="button-group">
            <div class="test-button-group">
                <button onclick="showTestImageSelect('landmarks')" class="test-button">
                    <i class="fas fa-vial"></i> 加载测试图片
                </button>
                <div id="landmarksTestSelect" class="test-select-dropdown">
                </div>
            </div>
            <button onclick="detectLandmarks('landmarksPoint')">获取特征点坐标</button>
            <button onclick="detectLandmarks('landmarksDraw')">绘制特征点</button>
            <button onclick="detectLandmarks('landmarksMakeup')">虚拟美妆</button>
        </div>
        <div class="loading" id="landmarkLoading" style="display: none;">处理中...</div>
        <div class="result-area" id="landmarkResult"></div>
    </div>
</div> 